<template>

	<view>

		<cu-custom isBack="true" :bgColor="'bg-'+$themeColor()">
			<block slot="backText">返回</block>
			<block slot="content">小区信息</block>
		</cu-custom>
		
		<view :class="'bg-'+$bgColor()">
			<form @submit="formSubmit">
				<input name="id" :value="data.id" style="display: none;"/>
				<input name="areaId" :value="data.areaId" style="display: none;"/>
				<view class="cu-form-group ">
					<view class="title" >区域:</view>
					<input  name="region" :value="data.region" style="display: none;"></input>
					<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
						<view class="picker">
							{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group ">
					<view class="title" >所属工程:</view>
					<input  name="belongProject" :value="data.belongProject" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >检查日期:</view>
					<input  name="checkDate" :value="data.checkDate" style="display: none;"></input>
					
					<picker mode="date" :value="data.checkDate" start="2015-09-01" end="2120-01-01" @change="DateChange">
						<view class="picker">
							{{$formatDate(data.checkDate) != ''  ? $formatDate(data.checkDate):'请选择'}}
						</view>
					</picker>
					
				</view>
				<view class="cu-form-group ">
					<view class="title" >所属社区:</view>
					<input  name="belongDistrict" :value="data.belongDistrict" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >所属街道:</view>
					<input  name="belongStreet" :value="data.belongStreet" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区名称:</view>
					<input  name="areaName" :value="data.areaName" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区类型:</view>
					<input  name="areaType" :value="data.areaType" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >小区位置:</view>
					<input  name="areaPosition" :value="data.areaPosition" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >工区:</view>
					<input  name="workArea" :value="data.workArea" ></input>
				</view>
				
				<view class="cu-form-group ">
					<view class="title" >小区正本清源方案类型:</view>
					<input  name="planType" :value="data.planType" ></input>
				</view>
				
				<view class="cu-form-group ">
					<view class="title" >是否实现了雨污分流效果:</view>
					<!-- <input  name="effectState" :value="data.effectState" ></input> -->
					<input  name="effectState" :value="data.effectState" style="display: none;"></input>
					<switch @change="SwitchEffectState" :class="data.effectState=='是'?'checked':''" :checked="data.effectState=='是'?true:false"></switch>
				</view>
				
				<!-- <view class="cu-form-group ">
					<view class="title" >排水达标认定:</view>
					<input  name="qualification" :value="data.qualification" ></input>
				</view> -->
				<view class="cu-form-group ">
					<view class="title" >是否验收:</view>
					<!-- <input  name="checkState" :value="data.checkState" ></input> -->
					<input  name="checkState" :value="data.checkState" style="display: none;"></input>
					<switch @change="SwitchCheckState" :class="data.checkState=='是'?'checked':''" :checked="data.checkState=='是'?true:false"></switch>
					
					
					<view class="title" >是否移交:</view>
					<!-- <input  name="transferState" :value="data.transferState" ></input> -->
					<input  name="transferState" :value="data.transferState" style="display: none;"></input>
					<switch @change="SwitchTransferState" :class="data.transferState=='是'?'checked':''" :checked="data.transferState=='是'?true:false"></switch>
					
					
				</view>
				<view class="padding flex flex-direction">
					<button form-type="submit" class="cu-btn bg-blue margin-tb-sm lg" :disabled="submiting">提交</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		data() {
			return {
				id: '',
				data: '',
				regionPicker:[],
				regionPickerIndex:-1,
				submiting:false,
			}
		},
		onLoad: function(opt) {
			this.id = opt.id;
			// 获取项目数据
			this.getProjectInfo(this.id);
			
			// 获取区域信息
			this.getRegion();
		},
		mounted() {
			// 初始化加载
			
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.req();
			},
	
			getProjectInfo(id) {
				this.$httpGet('/system/area/getAreaById/'+id , null).then(res => {
					this.data = res.data.data;
					// this.data.checkDate = this.$dateFormat(new Date(this.data.checkDate)); 
				});
			},
			SwitchEffectState(e){
				this.data.effectState = e.detail.value?'是':'否';
			},
			SwitchCheckState(e){
				this.data.checkState = e.detail.value?'是':'否';
			},
			SwitchTransferState(e) {
				this.data.transferState = e.detail.value?'是':'否';
			},
			regionPickerChange(e){
				this.regionPickerIndex = e.detail.value
				this.data.region = this.regionPicker[this.regionPickerIndex]
			},
			getRegion(){
				var dictData = {dictType:'zbqy_region'}
				this.$httpPost('/system/dict/data/list' , dictData).then(res => {
					// this.data = res.data.data
					var array = res.data.rows;
					var regionPicker = [];
					for (var i = 0; i < array.length; i++) {  
						// console.log(array[i].dictValue);  
						regionPicker.push(array[i].dictValue)
					}
					this.regionPicker = regionPicker;
				})
			},
			DateChange(e) {
				this.data.checkDate = e.detail.value
			},
			formSubmit(e){
				this.submiting = true;
				var formData = e.detail.value;
				this.$httpPost('/system/area/edit' , formData).then(res => {
					console.log(res);
					this.$msg(res.data.msg);
					setTimeout(() => {
						// uni.navigateBack();
						this.submiting = false;
					}, 1000);
					
				})
				
				
			},
			isNull(e) {
				if (e != null) {
					return e;
				}
				return "";
			}
		
		}
	}
</script>

<style>
   .cu-form-group .title {
		min-width: calc(4em + 10px);
		text-align: right;
	}
	canvas {
		background-color: #DDDDDD;
		width: 700upx;
		margin: 0 25upx;
		height: calc(30vh - 10upx);
	}
</style>
